<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>API: colorpicker   ColorPicker.js  (YUI Library)</title>
	<link rel="stylesheet" type="text/css" href="assets/api.css">
    <script type="text/javascript" src="assets/api-js"></script>
    <script type="text/javascript" src="assets/ac-js"></script>
</head>

<body id="yahoo-com">

<div id="doc3" class="yui-t2">

	<div id="hd">
        <a href="http://developer.yahoo.com/yui/"><h1>Yahoo! UI Library</h1></a>
        <h3>colorpicker&nbsp; <span class="subtitle">2.3.1</span></h3>
        <p>
        <a href="./index.html">Yahoo! UI Library</a> 
            &gt; <a href="./module_colorpicker.html">colorpicker</a>
                
                 &gt; ColorPicker.js (source view) 
            </p>

	</div>

	<div id="bd">
		<div id="yui-main">
			<div class="yui-b">
            <form name="yui-classopts-form">
    <span id="classopts"><input type="checkbox" name="showprivate" id="showprivate" /> Show Private</span>
    <span id="classopts"><input type="checkbox" name="showprotected" id="showprotected" /> Show Protected</span>
            </form>

                    <div id="srcout">
                        <style>
                            #doc3 #classopts { display:none; }
                        </style>
<div class="highlight" ><pre><span class="o">(</span><span class="k">function</span><span class="o">()</span> <span class="o">{</span>

    <span class="k">var</span> <span class="nx">_pickercount</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span>

    <span class="c">/**</span>
<span class="c">     * The colorpicker module provides a widget for selecting colors</span>
<span class="c">     * @module colorpicker</span>
<span class="c">     * @requires yahoo, dom, event, element, slider</span>
<span class="c">     */</span>


    <span class="c">/**</span>
<span class="c">     * Creates the host element if it doesn&#39;t exist</span>
<span class="c">     * @method _createHostElement</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_createHostElement</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="nb">document</span><span class="o">.</span><span class="nx">createElement</span><span class="o">(</span><span class="s1">&#39;div&#39;</span><span class="o">);</span>

        <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">CSS</span><span class="o">.</span><span class="nx">BASE</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">el</span><span class="o">.</span><span class="nx">className</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">CSS</span><span class="o">.</span><span class="nx">BASE</span><span class="o">;</span>
        <span class="o">}</span>
        
        <span class="k">return</span> <span class="nx">el</span><span class="o">;</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * A widget to select colors</span>
<span class="c">     * @namespace YAHOO.widget</span>
<span class="c">     * @class YAHOO.widget.ColorPicker</span>
<span class="c">     * @extends YAHOO.util.Element</span>
<span class="c">     * @constructor</span>
<span class="c">     * @param {HTMLElement | String | Object} el(optional) The html </span>
<span class="c">     * element that represents the colorpicker, or the attribute object to use. </span>
<span class="c">     * An element will be created if none provided.</span>
<span class="c">     * @param {Object} attr (optional) A key map of the colorpicker&#39;s </span>
<span class="c">     * initial attributes.  Ignored if first arg is attributes object.</span>
<span class="c">     */</span>
    <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">widget</span><span class="o">.</span><span class="nx">ColorPicker</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="nx">attr</span><span class="o">)</span> <span class="o">{</span>
        <span class="nx">_pickercount</span> <span class="o">=</span> <span class="nx">_pickercount</span> <span class="o">+</span> <span class="m">1</span><span class="o">;</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">logger</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">widget</span><span class="o">.</span><span class="nx">LogWriter</span><span class="o">(</span><span class="s2">&quot;ColorPicker&quot;</span><span class="o">);</span>
        <span class="nx">attr</span> <span class="o">=</span> <span class="nx">attr</span> <span class="o">||</span> <span class="o">{};</span>
        <span class="k">if</span> <span class="o">(</span><span class="nx">arguments</span><span class="o">.</span><span class="nx">length</span> <span class="o">===</span> <span class="m">1</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">YAHOO</span><span class="o">.</span><span class="nx">lang</span><span class="o">.</span><span class="nx">isString</span><span class="o">(</span><span class="nx">el</span><span class="o">)</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">el</span><span class="o">.</span><span class="nx">nodeName</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">attr</span> <span class="o">=</span> <span class="nx">el</span><span class="o">;</span> <span class="c">// treat first arg as attr object</span>
<span class="c"></span>            <span class="nx">el</span> <span class="o">=</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">element</span> <span class="o">||</span> <span class="kc">null</span><span class="o">;</span>
        <span class="o">}</span>
        
        <span class="k">if</span> <span class="o">(!</span><span class="nx">el</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">attr</span><span class="o">.</span><span class="nx">element</span><span class="o">)</span> <span class="o">{</span> <span class="c">// create if we dont have one</span>
<span class="c"></span>            <span class="k">this</span><span class="o">.</span><span class="nx">logger</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;creating host element&quot;</span><span class="o">);</span>
            <span class="nx">el</span> <span class="o">=</span> <span class="nx">_createHostElement</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="nx">attr</span><span class="o">);</span>
        <span class="o">}</span>

    	<span class="nx">YAHOO</span><span class="o">.</span><span class="nx">widget</span><span class="o">.</span><span class="nx">ColorPicker</span><span class="o">.</span><span class="nx">superclass</span><span class="o">.</span><span class="nx">constructor</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="nx">el</span><span class="o">,</span> <span class="nx">attr</span><span class="o">);</span> 
    <span class="o">};</span>

    <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">extend</span><span class="o">(</span><span class="nx">YAHOO</span><span class="o">.</span><span class="nx">widget</span><span class="o">.</span><span class="nx">ColorPicker</span><span class="o">,</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Element</span><span class="o">);</span>
    
    <span class="k">var</span> <span class="nx">proto</span> <span class="o">=</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">widget</span><span class="o">.</span><span class="nx">ColorPicker</span><span class="o">.</span><span class="nx">prototype</span><span class="o">,</span>
        <span class="nx">Slider</span><span class="o">=</span><span class="nx">YAHOO</span><span class="o">.</span><span class="nx">widget</span><span class="o">.</span><span class="nx">Slider</span><span class="o">,</span>
        <span class="nx">Color</span><span class="o">=</span><span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Color</span><span class="o">,</span>
        <span class="nx">Dom</span> <span class="o">=</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Dom</span><span class="o">,</span>
        <span class="nx">Event</span> <span class="o">=</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">util</span><span class="o">.</span><span class="nx">Event</span><span class="o">,</span>
        <span class="nx">lang</span> <span class="o">=</span> <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">lang</span><span class="o">,</span>
        <span class="nx">sub</span> <span class="o">=</span> <span class="nx">lang</span><span class="o">.</span><span class="nx">substitute</span><span class="o">;</span>
    

    <span class="k">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="s2">&quot;yui-picker&quot;</span><span class="o">;</span>

    <span class="c">/**</span>
<span class="c">     * The element ids used by this control</span>
<span class="c">     * @property ID</span>
<span class="c">     * @final</span>
<span class="c">     */</span>
    <span class="nx">proto</span><span class="o">.</span><span class="nx">ID</span> <span class="o">=</span> <span class="o">{</span>

        <span class="c">/**</span>
<span class="c">         * The id for the &quot;red&quot; form field</span>
<span class="c">         * @property ID.R</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-r</span>
<span class="c">         */</span>
        <span class="nx">R</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-r&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the &quot;red&quot; hex pair output</span>
<span class="c">         * @property ID.R_HEX</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-rhex</span>
<span class="c">         */</span>
        <span class="nx">R_HEX</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-rhex&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the &quot;green&quot; form field</span>
<span class="c">         * @property ID.G</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-g</span>
<span class="c">         */</span>
        <span class="nx">G</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-g&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the &quot;green&quot; hex pair output</span>
<span class="c">         * @property ID.G_HEX</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-ghex</span>
<span class="c">         */</span>
        <span class="nx">G_HEX</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-ghex&quot;</span><span class="o">,</span>


        <span class="c">/**</span>
<span class="c">         * The id for the &quot;blue&quot; form field</span>
<span class="c">         * @property ID.B</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-b</span>
<span class="c">         */</span>
        <span class="nx">B</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-b&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the &quot;blue&quot; hex pair output</span>
<span class="c">         * @property ID.B_HEX</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-bhex</span>
<span class="c">         */</span>
        <span class="nx">B_HEX</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-bhex&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the &quot;hue&quot; form field</span>
<span class="c">         * @property ID.H</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-h</span>
<span class="c">         */</span>
        <span class="nx">H</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-h&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the &quot;saturation&quot; form field</span>
<span class="c">         * @property ID.S</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-s</span>
<span class="c">         */</span>
        <span class="nx">S</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-s&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the &quot;value&quot; form field</span>
<span class="c">         * @property ID.V</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-v</span>
<span class="c">         */</span>
        <span class="nx">V</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-v&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the picker region slider</span>
<span class="c">         * @property ID.PICKER_BG</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-bg</span>
<span class="c">         */</span>
        <span class="nx">PICKER_BG</span><span class="o">:</span>      <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-bg&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the picker region thumb</span>
<span class="c">         * @property ID.PICKER_THUMB</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-thumb</span>
<span class="c">         */</span>
        <span class="nx">PICKER_THUMB</span><span class="o">:</span>   <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-thumb&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the hue slider</span>
<span class="c">         * @property ID.HUE_BG</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-hue-bg</span>
<span class="c">         */</span>
        <span class="nx">HUE_BG</span><span class="o">:</span>         <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-hue-bg&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the hue thumb</span>
<span class="c">         * @property ID.HUE_THUMB</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-hue-thumb</span>
<span class="c">         */</span>
        <span class="nx">HUE_THUMB</span><span class="o">:</span>      <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-hue-thumb&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the hex value form field</span>
<span class="c">         * @property ID.HEX</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-hex</span>
<span class="c">         */</span>
        <span class="nx">HEX</span><span class="o">:</span>            <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-hex&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the color swatch</span>
<span class="c">         * @property ID.SWATCH</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-swatch</span>
<span class="c">         */</span>
        <span class="nx">SWATCH</span><span class="o">:</span>         <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-swatch&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the websafe color swatch</span>
<span class="c">         * @property ID.WEBSAFE_SWATCH</span>
<span class="c">         * @type String</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-websafe-swatch</span>
<span class="c">         */</span>
        <span class="nx">WEBSAFE_SWATCH</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-websafe-swatch&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the control details</span>
<span class="c">         * @property ID.CONTROLS</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-controls</span>
<span class="c">         */</span>
        <span class="nx">CONTROLS</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-controls&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the rgb controls</span>
<span class="c">         * @property ID.RGB_CONTROLS</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-rgb-controls</span>
<span class="c">         */</span>
        <span class="nx">RGB_CONTROLS</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-rgb-controls&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the hsv controls</span>
<span class="c">         * @property ID.HSV_CONTROLS</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-hsv-controls</span>
<span class="c">         */</span>
        <span class="nx">HSV_CONTROLS</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-hsv-controls&quot;</span><span class="o">,</span>
        
        <span class="c">/**</span>
<span class="c">         * The id for the hsv controls</span>
<span class="c">         * @property ID.HEX_CONTROLS</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-hex-controls</span>
<span class="c">         */</span>
        <span class="nx">HEX_CONTROLS</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-hex-controls&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the hex summary</span>
<span class="c">         * @property ID.HEX_SUMMARY</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-hex-summary</span>
<span class="c">         */</span>
        <span class="nx">HEX_SUMMARY</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-hex-summary&quot;</span><span class="o">,</span>

        <span class="c">/**</span>
<span class="c">         * The id for the controls section header</span>
<span class="c">         * @property ID.CONTROLS_LABEL</span>
<span class="c">         * @final</span>
<span class="c">         * @default yui-picker-controls-label</span>
<span class="c">         */</span>
        <span class="nx">CONTROLS_LABEL</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-controls-label&quot;</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Constants for any script-generated messages.  The values here</span>
<span class="c">     * are the default messages.  They can be updated by providing</span>
<span class="c">     * the complete list to the constructor for the &quot;txt&quot; attribute.</span>
<span class="c">     * @property TXT</span>
<span class="c">     * @final</span>
<span class="c">     */</span>
    <span class="nx">proto</span><span class="o">.</span><span class="nx">TXT</span> <span class="o">=</span> <span class="o">{</span>
        <span class="nx">ILLEGAL_HEX</span><span class="o">:</span> <span class="s2">&quot;Illegal hex value entered&quot;</span><span class="o">,</span>
        <span class="nx">SHOW_CONTROLS</span><span class="o">:</span> <span class="s2">&quot;Show color details&quot;</span><span class="o">,</span>
        <span class="nx">HIDE_CONTROLS</span><span class="o">:</span> <span class="s2">&quot;Hide color details&quot;</span><span class="o">,</span>
        <span class="nx">CURRENT_COLOR</span><span class="o">:</span> <span class="s2">&quot;Currently selected color: {rgb}&quot;</span><span class="o">,</span>
        <span class="nx">CLOSEST_WEBSAFE</span><span class="o">:</span> <span class="s2">&quot;Closest websafe color: {rgb}. Click to select.&quot;</span><span class="o">,</span>
        <span class="nx">R</span><span class="o">:</span> <span class="s2">&quot;R&quot;</span><span class="o">,</span>
        <span class="nx">G</span><span class="o">:</span> <span class="s2">&quot;G&quot;</span><span class="o">,</span>
        <span class="nx">B</span><span class="o">:</span> <span class="s2">&quot;B&quot;</span><span class="o">,</span>
        <span class="nx">H</span><span class="o">:</span> <span class="s2">&quot;H&quot;</span><span class="o">,</span>
        <span class="nx">S</span><span class="o">:</span> <span class="s2">&quot;S&quot;</span><span class="o">,</span>
        <span class="nx">V</span><span class="o">:</span> <span class="s2">&quot;V&quot;</span><span class="o">,</span>
        <span class="nx">HEX</span><span class="o">:</span> <span class="s2">&quot;#&quot;</span><span class="o">,</span>
        <span class="nx">DEG</span><span class="o">:</span> <span class="s2">&quot;\u00B0&quot;</span><span class="o">,</span>
        <span class="nx">PERCENT</span><span class="o">:</span> <span class="s2">&quot;%&quot;</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Constants for the default image locations for img tags that are</span>
<span class="c">     * generated by the control.  They can be modified by passing the</span>
<span class="c">     * complete list to the contructor for the &quot;images&quot; attribute</span>
<span class="c">     * @property IMAGE</span>
<span class="c">     * @final</span>
<span class="c">     */</span>
    <span class="nx">proto</span><span class="o">.</span><span class="nx">IMAGE</span> <span class="o">=</span> <span class="o">{</span>
        <span class="nx">PICKER_THUMB</span><span class="o">:</span> <span class="s2">&quot;../../build/colorpicker/assets/picker_thumb.png&quot;</span><span class="o">,</span>
        <span class="nx">HUE_THUMB</span><span class="o">:</span> <span class="s2">&quot;../../build/colorpicker/assets/hue_thumb.png&quot;</span>
    <span class="o">};</span>

    <span class="c">/*</span>
<span class="c">     * Constants for the control&#39;s custom event names.  subscribe</span>
<span class="c">     * to the rgbChange event instead.</span>
<span class="c">     * @property EVENT</span>
<span class="c">     * @final</span>
<span class="c">     */</span>
    <span class="c">//proto.EVENT = {</span>
<span class="c"></span>        <span class="c">//CHANGE: &quot;change&quot;</span>
<span class="c"></span>    <span class="c">//};</span>
<span class="c"></span>
    <span class="c">//proto.CSS = { };</span>
<span class="c"></span>
    <span class="c">/**</span>
<span class="c">     * Constants for the control&#39;s default default values</span>
<span class="c">     * @property DEFAULT</span>
<span class="c">     * @final</span>
<span class="c">     */</span>
    <span class="nx">proto</span><span class="o">.</span><span class="nx">DEFAULT</span> <span class="o">=</span> <span class="o">{</span>
        <span class="nx">PICKER_SIZE</span><span class="o">:</span> <span class="m">180</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Constants for the control&#39;s configuration attributes</span>
<span class="c">     * @property OPT</span>
<span class="c">     * @final</span>
<span class="c">     */</span>
    <span class="nx">proto</span><span class="o">.</span><span class="nx">OPT</span> <span class="o">=</span> <span class="o">{</span>
        <span class="nx">HUE</span><span class="o">:</span> <span class="s2">&quot;hue&quot;</span><span class="o">,</span>
        <span class="nx">SATURATION</span><span class="o">:</span> <span class="s2">&quot;saturation&quot;</span><span class="o">,</span>
        <span class="nx">VALUE</span><span class="o">:</span> <span class="s2">&quot;value&quot;</span><span class="o">,</span>
        <span class="nx">RED</span><span class="o">:</span> <span class="s2">&quot;red&quot;</span><span class="o">,</span>
        <span class="nx">GREEN</span><span class="o">:</span> <span class="s2">&quot;green&quot;</span><span class="o">,</span>
        <span class="nx">BLUE</span><span class="o">:</span> <span class="s2">&quot;blue&quot;</span><span class="o">,</span>
        <span class="nx">HSV</span><span class="o">:</span> <span class="s2">&quot;hsv&quot;</span><span class="o">,</span>
        <span class="nx">RGB</span><span class="o">:</span> <span class="s2">&quot;rgb&quot;</span><span class="o">,</span>
        <span class="nx">WEBSAFE</span><span class="o">:</span> <span class="s2">&quot;websafe&quot;</span><span class="o">,</span>
        <span class="nx">HEX</span><span class="o">:</span> <span class="s2">&quot;hex&quot;</span><span class="o">,</span>
        <span class="nx">PICKER_SIZE</span><span class="o">:</span> <span class="s2">&quot;pickersize&quot;</span><span class="o">,</span>
        <span class="nx">SHOW_CONTROLS</span><span class="o">:</span> <span class="s2">&quot;showcontrols&quot;</span><span class="o">,</span>
        <span class="nx">SHOW_RGB_CONTROLS</span><span class="o">:</span> <span class="s2">&quot;showrgbcontrols&quot;</span><span class="o">,</span>
        <span class="nx">SHOW_HSV_CONTROLS</span><span class="o">:</span> <span class="s2">&quot;showhsvcontrols&quot;</span><span class="o">,</span>
        <span class="nx">SHOW_HEX_CONTROLS</span><span class="o">:</span> <span class="s2">&quot;showhexcontrols&quot;</span><span class="o">,</span>
        <span class="nx">SHOW_HEX_SUMMARY</span><span class="o">:</span> <span class="s2">&quot;showhexsummary&quot;</span><span class="o">,</span>
        <span class="nx">SHOW_WEBSAFE</span><span class="o">:</span> <span class="s2">&quot;showwebsafe&quot;</span><span class="o">,</span>
        <span class="c">//SHOW_SUBMIT: &quot;showsubmit&quot;,</span>
<span class="c"></span>        <span class="nx">CONTAINER</span><span class="o">:</span> <span class="s2">&quot;container&quot;</span><span class="o">,</span>
        <span class="nx">IDS</span><span class="o">:</span> <span class="s2">&quot;ids&quot;</span><span class="o">,</span>
        <span class="nx">ELEMENTS</span><span class="o">:</span> <span class="s2">&quot;elements&quot;</span><span class="o">,</span>
        <span class="nx">TXT</span><span class="o">:</span> <span class="s2">&quot;txt&quot;</span><span class="o">,</span>
        <span class="nx">IMAGES</span><span class="o">:</span> <span class="s2">&quot;images&quot;</span><span class="o">,</span>
        <span class="nx">ANIMATE</span><span class="o">:</span> <span class="s2">&quot;animate&quot;</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Moves the hue slider into the position dictated by the current state</span>
<span class="c">     * of the control</span>
<span class="c">     * @method _updateHueSlider</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_updateHueSlider</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">size</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">PICKER_SIZE</span><span class="o">),</span>
            <span class="nx">h</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HUE</span><span class="o">);</span>

        <span class="nx">h</span> <span class="o">=</span> <span class="nx">size</span> <span class="o">-</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">round</span><span class="o">(</span><span class="nx">h</span> <span class="o">/</span> <span class="m">360</span> <span class="o">*</span> <span class="nx">size</span><span class="o">);</span>
        
        <span class="c">// 0 is at the top and bottom of the hue slider.  Always go to</span>
<span class="c"></span>        <span class="c">// the top so we don&#39;t end up sending the thumb to the bottom</span>
<span class="c"></span>        <span class="c">// when the value didn&#39;t actually change (e.g., a conversion</span>
<span class="c"></span>        <span class="c">// produced 360 instead of 0 and the value was already 0).</span>
<span class="c"></span>        <span class="k">if</span> <span class="o">(</span><span class="nx">h</span> <span class="o">===</span> <span class="nx">size</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">h</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span>
        <span class="o">}</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">logger</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Hue slider is being set to &quot;</span> <span class="o">+</span> <span class="nx">h</span><span class="o">);</span>

        <span class="k">this</span><span class="o">.</span><span class="nx">hueSlider</span><span class="o">.</span><span class="nx">setValue</span><span class="o">(</span><span class="nx">h</span><span class="o">);</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Moves the picker slider into the position dictated by the current state</span>
<span class="c">     * of the control</span>
<span class="c">     * @method _updatePickerSlider</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_updatePickerSlider</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">size</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">PICKER_SIZE</span><span class="o">),</span>
            <span class="nx">s</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SATURATION</span><span class="o">),</span>
            <span class="nx">v</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">VALUE</span><span class="o">);</span>

        <span class="nx">s</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">round</span><span class="o">(</span><span class="nx">s</span> <span class="o">*</span> <span class="nx">size</span> <span class="o">/</span> <span class="m">100</span><span class="o">);</span>
        <span class="nx">v</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">round</span><span class="o">(</span><span class="nx">size</span> <span class="o">-</span> <span class="o">(</span><span class="nx">v</span> <span class="o">*</span> <span class="nx">size</span> <span class="o">/</span> <span class="m">100</span><span class="o">));</span>

        <span class="k">this</span><span class="o">.</span><span class="nx">logger</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Setting picker slider to &quot;</span> <span class="o">+</span> <span class="o">[</span><span class="nx">s</span><span class="o">,</span> <span class="nx">v</span><span class="o">]);</span>

        <span class="k">this</span><span class="o">.</span><span class="nx">pickerSlider</span><span class="o">.</span><span class="nx">setRegionValue</span><span class="o">(</span><span class="nx">s</span><span class="o">,</span> <span class="nx">v</span><span class="o">);</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Moves the sliders into the position dictated by the current state</span>
<span class="c">     * of the control</span>
<span class="c">     * @method _updateSliders</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_updateSliders</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
        <span class="nx">_updateHueSlider</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
        <span class="nx">_updatePickerSlider</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Sets the control to the specified rgb value and</span>
<span class="c">     * moves the sliders to the proper positions</span>
<span class="c">     * @method setValue</span>
<span class="c">     * @param rgb {[int, int, int]} the rgb value</span>
<span class="c">     * @param silent {boolean} whether or not to fire the change event</span>
<span class="c">     */</span>
    <span class="nx">proto</span><span class="o">.</span><span class="nx">setValue</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">rgb</span><span class="o">,</span> <span class="nx">silent</span><span class="o">)</span> <span class="o">{</span>
        <span class="nx">silent</span> <span class="o">=</span> <span class="o">(</span><span class="nx">silent</span><span class="o">)</span> <span class="o">||</span> <span class="kc">false</span><span class="o">;</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">RGB</span><span class="o">,</span> <span class="nx">rgb</span><span class="o">,</span> <span class="nx">silent</span><span class="o">);</span>
        <span class="nx">_updateSliders</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * The hue slider</span>
<span class="c">     * @property hueSlider</span>
<span class="c">     * @type YAHOO.widget.Slider</span>
<span class="c">     */</span>
    <span class="nx">proto</span><span class="o">.</span><span class="nx">hueSlider</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> 
    
    <span class="c">/**</span>
<span class="c">     * The picker region</span>
<span class="c">     * @property pickerSlider</span>
<span class="c">     * @type YAHOO.widget.Slider</span>
<span class="c">     */</span>
    <span class="nx">proto</span><span class="o">.</span><span class="nx">pickerSlider</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span>

    <span class="c">/**</span>
<span class="c">     * Translates the slider value into hue, int[0,359]</span>
<span class="c">     * @method _getH</span>
<span class="c">     * @private</span>
<span class="c">     * @return {int} the hue from 0 to 359</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_getH</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">size</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">PICKER_SIZE</span><span class="o">),</span>
            <span class="nx">h</span> <span class="o">=</span> <span class="o">(</span><span class="nx">size</span> <span class="o">-</span> <span class="k">this</span><span class="o">.</span><span class="nx">hueSlider</span><span class="o">.</span><span class="nx">getValue</span><span class="o">())</span> <span class="o">/</span> <span class="nx">size</span><span class="o">;</span>
        <span class="nx">h</span> <span class="o">=</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">round</span><span class="o">(</span><span class="nx">h</span><span class="o">*</span><span class="m">360</span><span class="o">);</span>
        <span class="k">return</span> <span class="o">(</span><span class="nx">h</span> <span class="o">===</span> <span class="m">360</span><span class="o">)</span> <span class="o">?</span> <span class="m">0</span> <span class="o">:</span> <span class="nx">h</span><span class="o">;</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Translates the slider value into saturation, int[0,1], left to right</span>
<span class="c">     * @method _getS</span>
<span class="c">     * @private</span>
<span class="c">     * @return {int} the saturation from 0 to 1</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_getS</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">return</span> <span class="k">this</span><span class="o">.</span><span class="nx">pickerSlider</span><span class="o">.</span><span class="nx">getXValue</span><span class="o">()</span> <span class="o">/</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">PICKER_SIZE</span><span class="o">);</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Translates the slider value into value/brightness, int[0,1], top</span>
<span class="c">     * to bottom</span>
<span class="c">     * @method _getV</span>
<span class="c">     * @private</span>
<span class="c">     * @return {int} the value from 0 to 1</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_getV</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">size</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">PICKER_SIZE</span><span class="o">);</span>
        <span class="k">return</span> <span class="o">(</span><span class="nx">size</span> <span class="o">-</span> <span class="k">this</span><span class="o">.</span><span class="nx">pickerSlider</span><span class="o">.</span><span class="nx">getYValue</span><span class="o">())</span> <span class="o">/</span> <span class="nx">size</span><span class="o">;</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Updates the background of the swatch with the current rbg value.</span>
<span class="c">     * Also updates the websafe swatch to the closest websafe color</span>
<span class="c">     * @method _updateSwatch</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_updateSwatch</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">RGB</span><span class="o">),</span>
            <span class="nx">websafe</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">WEBSAFE</span><span class="o">),</span>
            <span class="nx">el</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">SWATCH</span><span class="o">),</span>
            <span class="nx">color</span> <span class="o">=</span> <span class="nx">rgb</span><span class="o">.</span><span class="nx">join</span><span class="o">(</span><span class="s2">&quot;,&quot;</span><span class="o">),</span>
            <span class="nx">txt</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">TXT</span><span class="o">);</span>

        <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;background-color&quot;</span><span class="o">,</span> <span class="s2">&quot;rgb(&quot;</span> <span class="o">+</span> <span class="nx">color</span>  <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="o">);</span>
        <span class="nx">el</span><span class="o">.</span><span class="nx">title</span> <span class="o">=</span> <span class="nx">lang</span><span class="o">.</span><span class="nx">substitute</span><span class="o">(</span><span class="nx">txt</span><span class="o">.</span><span class="nx">CURRENT_COLOR</span><span class="o">,</span> <span class="o">{</span>
                <span class="s2">&quot;rgb&quot;</span><span class="o">:</span> <span class="s2">&quot;#&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HEX</span><span class="o">)</span>
            <span class="o">});</span>


        <span class="nx">el</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">WEBSAFE_SWATCH</span><span class="o">);</span>
        <span class="nx">color</span> <span class="o">=</span> <span class="nx">websafe</span><span class="o">.</span><span class="nx">join</span><span class="o">(</span><span class="s2">&quot;,&quot;</span><span class="o">);</span>

        <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;background-color&quot;</span><span class="o">,</span> <span class="s2">&quot;rgb(&quot;</span> <span class="o">+</span> <span class="nx">color</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="o">);</span>
        <span class="nx">el</span><span class="o">.</span><span class="nx">title</span> <span class="o">=</span> <span class="nx">lang</span><span class="o">.</span><span class="nx">substitute</span><span class="o">(</span><span class="nx">txt</span><span class="o">.</span><span class="nx">CLOSEST_WEBSAFE</span><span class="o">,</span> <span class="o">{</span>
                <span class="s2">&quot;rgb&quot;</span><span class="o">:</span> <span class="s2">&quot;#&quot;</span> <span class="o">+</span> <span class="nx">Color</span><span class="o">.</span><span class="nx">rgb2hex</span><span class="o">(</span><span class="nx">websafe</span><span class="o">)</span>
            <span class="o">});</span>

    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Reads the sliders and converts the values to RGB, updating the</span>
<span class="c">     * internal state for all the individual form fields</span>
<span class="c">     * @method _getValuesFromSliders</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_getValuesFromSliders</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">h</span><span class="o">=</span><span class="nx">_getH</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">),</span> <span class="nx">s</span><span class="o">=</span><span class="nx">_getS</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">),</span> <span class="nx">v</span><span class="o">=</span><span class="nx">_getV</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
        <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;hsv &quot;</span> <span class="o">+</span> <span class="o">[</span><span class="nx">h</span><span class="o">,</span> <span class="nx">s</span><span class="o">,</span> <span class="nx">v</span><span class="o">]);</span>

        <span class="k">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="nx">Color</span><span class="o">.</span><span class="nx">hsv2rgb</span><span class="o">(</span><span class="nx">h</span><span class="o">,</span> <span class="nx">s</span><span class="o">,</span> <span class="nx">v</span><span class="o">);</span>
        <span class="c">//var websafe = Color.websafe(rgb);</span>
<span class="c"></span>        <span class="c">//var hex = Color.rgb2hex(rgb[0], rgb[1], rgb[2]);</span>
<span class="c"></span>
        <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">RGB</span><span class="o">,</span> <span class="nx">rgb</span><span class="o">);</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Updates the form field controls with the state data contained</span>
<span class="c">     * in the control.</span>
<span class="c">     * @method _updateFormFields</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_updateFormFields</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">H</span><span class="o">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HUE</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">S</span><span class="o">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SATURATION</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">V</span><span class="o">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">VALUE</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">R</span><span class="o">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">RED</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">R_HEX</span><span class="o">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">Color</span><span class="o">.</span><span class="nx">dec2hex</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">RED</span><span class="o">));</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">G</span><span class="o">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">GREEN</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">G_HEX</span><span class="o">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">Color</span><span class="o">.</span><span class="nx">dec2hex</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">GREEN</span><span class="o">));</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">B</span><span class="o">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">BLUE</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">B_HEX</span><span class="o">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">Color</span><span class="o">.</span><span class="nx">dec2hex</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">BLUE</span><span class="o">));</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HEX</span><span class="o">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HEX</span><span class="o">);</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Event handler for the hue slider.</span>
<span class="c">     * @method _onHueSliderChange</span>
<span class="c">     * @param newOffset {int} pixels from the start position</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_onHueSliderChange</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">newOffset</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">logger</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;hue update: &quot;</span> <span class="o">+</span> <span class="nx">newOffset</span> <span class="o">,</span> <span class="s2">&quot;warn&quot;</span><span class="o">);</span>

        <span class="k">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">_getH</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HUE</span><span class="o">,</span> <span class="nx">h</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>

        <span class="c">// set picker background to the hue</span>
<span class="c"></span>        <span class="k">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="nx">Color</span><span class="o">.</span><span class="nx">hsv2rgb</span><span class="o">(</span><span class="nx">h</span><span class="o">,</span> <span class="m">1</span><span class="o">,</span> <span class="m">1</span><span class="o">);</span>
        <span class="k">var</span> <span class="nx">styleDef</span> <span class="o">=</span> <span class="s2">&quot;rgb(&quot;</span> <span class="o">+</span> <span class="nx">rgb</span><span class="o">.</span><span class="nx">join</span><span class="o">(</span><span class="s2">&quot;,&quot;</span><span class="o">)</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="o">;</span>

        <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">PICKER_BG</span><span class="o">),</span> <span class="s2">&quot;background-color&quot;</span><span class="o">,</span> <span class="nx">styleDef</span><span class="o">);</span>

        <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">hueSlider</span><span class="o">.</span><span class="nx">valueChangeSource</span> <span class="o">===</span> <span class="k">this</span><span class="o">.</span><span class="nx">hueSlider</span><span class="o">.</span><span class="nx">SOURCE_UI_EVENT</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">_getValuesFromSliders</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
        <span class="o">}</span>

        <span class="nx">_updateFormFields</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
        <span class="nx">_updateSwatch</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Event handler for the picker slider, which controls the</span>
<span class="c">     * saturation and value/brightness.</span>
<span class="c">     * @method _onPickerSliderChange</span>
<span class="c">     * @param newOffset {{x: int, y: int}} x/y pixels from the start position</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_onPickerSliderChange</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">newOffset</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">logger</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="nx">sub</span><span class="o">(</span><span class="s2">&quot;picker update [{x}, {y}]&quot;</span><span class="o">,</span> <span class="nx">newOffset</span><span class="o">));</span>

        <span class="k">var</span> <span class="nx">s</span><span class="o">=</span><span class="nx">_getS</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">),</span> <span class="nx">v</span><span class="o">=</span><span class="nx">_getV</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SATURATION</span><span class="o">,</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">round</span><span class="o">(</span><span class="nx">s</span><span class="o">*</span><span class="m">100</span><span class="o">),</span> <span class="kc">true</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">VALUE</span><span class="o">,</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">round</span><span class="o">(</span><span class="nx">v</span><span class="o">*</span><span class="m">100</span><span class="o">),</span> <span class="kc">true</span><span class="o">);</span>

        <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">pickerSlider</span><span class="o">.</span><span class="nx">valueChangeSource</span> <span class="o">===</span> <span class="k">this</span><span class="o">.</span><span class="nx">pickerSlider</span><span class="o">.</span><span class="nx">SOURCE_UI_EVENT</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">_getValuesFromSliders</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
        <span class="o">}</span>

        <span class="nx">_updateFormFields</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
        <span class="nx">_updateSwatch</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
    <span class="o">};</span>


    <span class="c">/**</span>
<span class="c">     * Key map to well-known commands for txt field input</span>
<span class="c">     * @method _getCommand</span>
<span class="c">     * @param e {Event} the keypress or keydown event</span>
<span class="c">     * @return {int} a command code</span>
<span class="c">     * &lt;ul&gt;</span>
<span class="c">     * &lt;li&gt;0 = not a number, letter in range, or special key&lt;/li&gt;</span>
<span class="c">     * &lt;li&gt;1 = number&lt;/li&gt;</span>
<span class="c">     * &lt;li&gt;2 = a-fA-F&lt;/li&gt;</span>
<span class="c">     * &lt;li&gt;3 = increment (up arrow)&lt;/li&gt;</span>
<span class="c">     * &lt;li&gt;4 = decrement (down arrow)&lt;/li&gt;</span>
<span class="c">     * &lt;li&gt;5 = special key (tab, delete, return, escape, left, right)&lt;/li&gt; </span>
<span class="c">     * &lt;li&gt;6 = return&lt;/li&gt;</span>
<span class="c">     * &lt;/ul&gt;</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_getCommand</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">e</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="nx">Event</span><span class="o">.</span><span class="nx">getCharCode</span><span class="o">(</span><span class="nx">e</span><span class="o">);</span>

        <span class="c">//alert(Event.getCharCode(e) + &quot;, &quot; + e.keyCode + &quot;, &quot; + e.charCode);</span>
<span class="c"></span>
        <span class="c">// special keys</span>
<span class="c"></span>        <span class="k">if</span> <span class="o">(</span><span class="nx">c</span> <span class="o">===</span> <span class="m">38</span><span class="o">)</span> <span class="o">{</span> <span class="c">// up arrow</span>
<span class="c"></span>            <span class="k">return</span> <span class="m">3</span><span class="o">;</span>
        <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(</span><span class="nx">c</span> <span class="o">===</span> <span class="m">13</span><span class="o">)</span> <span class="o">{</span> <span class="c">// return</span>
<span class="c"></span>            <span class="k">return</span> <span class="m">6</span><span class="o">;</span>
        <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(</span><span class="nx">c</span> <span class="o">===</span> <span class="m">40</span><span class="o">)</span> <span class="o">{</span> <span class="c">// down array</span>
<span class="c"></span>            <span class="k">return</span> <span class="m">4</span><span class="o">;</span>
        <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(</span><span class="nx">c</span> <span class="o">&gt;=</span> <span class="m">48</span> <span class="o">&amp;&amp;</span> <span class="nx">c</span><span class="o">&lt;=</span><span class="m">57</span><span class="o">)</span> <span class="o">{</span> <span class="c">// 0-9</span>
<span class="c"></span>            <span class="k">return</span> <span class="m">1</span><span class="o">;</span>
        <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(</span><span class="nx">c</span> <span class="o">&gt;=</span> <span class="m">97</span> <span class="o">&amp;&amp;</span> <span class="nx">c</span><span class="o">&lt;=</span><span class="m">102</span><span class="o">)</span> <span class="o">{</span> <span class="c">// a-f</span>
<span class="c"></span>            <span class="k">return</span> <span class="m">2</span><span class="o">;</span>
        <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(</span><span class="nx">c</span> <span class="o">&gt;=</span> <span class="m">65</span> <span class="o">&amp;&amp;</span> <span class="nx">c</span><span class="o">&lt;=</span><span class="m">70</span><span class="o">)</span> <span class="o">{</span> <span class="c">// A-F</span>
<span class="c"></span>            <span class="k">return</span> <span class="m">2</span><span class="o">;</span>
        <span class="c">//} else if (&quot;8, 9, 13, 27, 37, 39&quot;.indexOf(c) &gt; -1 || </span>
<span class="c"></span>        <span class="c">//              (c &gt;= 112 &amp;&amp; c &lt;=123)) { // including F-keys</span>
<span class="c"></span>        <span class="c">// tab, delete, return, escape, left, right</span>
<span class="c"></span>        <span class="o">}</span> <span class="k">else</span> <span class="k">if</span> <span class="o">(</span><span class="s2">&quot;8, 9, 13, 27, 37, 39&quot;</span><span class="o">.</span><span class="nx">indexOf</span><span class="o">(</span><span class="nx">c</span><span class="o">)</span> <span class="o">&gt;</span> <span class="o">-</span><span class="m">1</span><span class="o">)</span> <span class="o">{</span> <span class="c">// special chars</span>
<span class="c"></span>            <span class="k">return</span> <span class="m">5</span><span class="o">;</span>
        <span class="o">}</span> <span class="k">else</span> <span class="o">{</span> <span class="c">// something we probably don&#39;t want</span>
<span class="c"></span>            <span class="k">return</span> <span class="m">0</span><span class="o">;</span>
        <span class="o">}</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Use the value of the text field to update the control</span>
<span class="c">     * @method _hexFieldKeypress</span>
<span class="c">     * @param e {Event} an event</span>
<span class="c">     * @param el {HTMLElement} the field</span>
<span class="c">     * @param prop {string} the key to the linked property</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_useFieldValue</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">e</span><span class="o">,</span> <span class="nx">el</span><span class="o">,</span> <span class="nx">prop</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">el</span><span class="o">.</span><span class="nx">value</span><span class="o">;</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">prop</span> <span class="o">!==</span> <span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HEX</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">val</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="o">(</span><span class="nx">val</span><span class="o">,</span> <span class="m">10</span><span class="o">);</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">val</span> <span class="o">!==</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">prop</span><span class="o">))</span> <span class="o">{</span>
            <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="nx">prop</span><span class="o">,</span> <span class="nx">val</span><span class="o">);</span>
        <span class="o">}</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Handle keypress on one of the rgb or hsv fields.</span>
<span class="c">     * @method _rgbFieldKeypress</span>
<span class="c">     * @param e {Event} the keypress event</span>
<span class="c">     * @param el {HTMLElement} the field</span>
<span class="c">     * @param prop {string} the key to the linked property</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_rgbFieldKeypress</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">e</span><span class="o">,</span> <span class="nx">el</span><span class="o">,</span> <span class="nx">prop</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">command</span> <span class="o">=</span> <span class="nx">_getCommand</span><span class="o">(</span><span class="nx">e</span><span class="o">);</span>
        <span class="k">var</span> <span class="nx">inc</span> <span class="o">=</span> <span class="o">(</span><span class="nx">e</span><span class="o">.</span><span class="nx">shiftKey</span><span class="o">)</span> <span class="o">?</span> <span class="m">10</span> <span class="o">:</span> <span class="m">1</span><span class="o">;</span>
        <span class="nx">switch</span> <span class="o">(</span><span class="nx">command</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">case</span> <span class="m">6</span><span class="o">:</span> <span class="c">// return, update the value</span>
<span class="c"></span>                <span class="nx">_useFieldValue</span><span class="o">.</span><span class="nx">apply</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="nx">arguments</span><span class="o">);</span>
                <span class="k">break</span><span class="o">;</span>
                        
            <span class="nx">case</span> <span class="m">3</span><span class="o">:</span> <span class="c">// up arrow, increment</span>
<span class="c"></span>                <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="nx">prop</span><span class="o">,</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">min</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">prop</span><span class="o">)+</span><span class="nx">inc</span><span class="o">,</span> <span class="m">255</span><span class="o">));</span>
                <span class="nx">_updateFormFields</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
                <span class="c">//Event.stopEvent(e);</span>
<span class="c"></span>                <span class="k">break</span><span class="o">;</span>
            <span class="nx">case</span> <span class="m">4</span><span class="o">:</span> <span class="c">// down arrow, decrement</span>
<span class="c"></span>                <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="nx">prop</span><span class="o">,</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">max</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">prop</span><span class="o">)-</span><span class="nx">inc</span><span class="o">,</span> <span class="m">0</span><span class="o">));</span>
                <span class="nx">_updateFormFields</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
                <span class="c">//Event.stopEvent(e);</span>
<span class="c"></span>                <span class="k">break</span><span class="o">;</span>

            <span class="nx">default</span><span class="o">:</span>
        <span class="o">}</span>

    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Handle keydown on the hex field</span>
<span class="c">     * @method _hexFieldKeypress</span>
<span class="c">     * @param e {Event} the keypress event</span>
<span class="c">     * @param el {HTMLElement} the field</span>
<span class="c">     * @param prop {string} the key to the linked property</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_hexFieldKeypress</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">e</span><span class="o">,</span> <span class="nx">el</span><span class="o">,</span> <span class="nx">prop</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">command</span> <span class="o">=</span> <span class="nx">_getCommand</span><span class="o">(</span><span class="nx">e</span><span class="o">);</span>
        <span class="k">if</span> <span class="o">(</span><span class="nx">command</span> <span class="o">===</span> <span class="m">6</span><span class="o">)</span> <span class="o">{</span> <span class="c">// return, update the value</span>
<span class="c"></span>            <span class="nx">_useFieldValue</span><span class="o">.</span><span class="nx">apply</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="nx">arguments</span><span class="o">);</span>
        <span class="o">}</span>
    <span class="o">};</span>

    <span class="c">/** </span>
<span class="c">     * Allows numbers and special chars, and by default allows a-f.  </span>
<span class="c">     * Used for the hex field keypress handler.</span>
<span class="c">     * @method _hexOnly</span>
<span class="c">     * @param e {Event} the event</span>
<span class="c">     * @param numbersOnly omits a-f if set to true</span>
<span class="c">     * @private</span>
<span class="c">     * @return {boolean} false if we are canceling the event</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_hexOnly</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">e</span><span class="o">,</span> <span class="nx">numbersOnly</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">command</span> <span class="o">=</span> <span class="nx">_getCommand</span><span class="o">(</span><span class="nx">e</span><span class="o">);</span>
        <span class="nx">switch</span> <span class="o">(</span><span class="nx">command</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">case</span> <span class="m">6</span><span class="o">:</span> <span class="c">// return</span>
<span class="c"></span>            <span class="nx">case</span> <span class="m">5</span><span class="o">:</span> <span class="c">// special char</span>
<span class="c"></span>            <span class="nx">case</span> <span class="m">1</span><span class="o">:</span> <span class="c">// number</span>
<span class="c"></span>                <span class="k">break</span><span class="o">;</span>
            <span class="nx">case</span> <span class="m">2</span><span class="o">:</span> <span class="c">// hex char (a-f)</span>
<span class="c"></span>                <span class="k">if</span> <span class="o">(</span><span class="nx">numbersOnly</span> <span class="o">!==</span> <span class="kc">true</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">break</span><span class="o">;</span>
                <span class="o">}</span>

                <span class="c">// fallthrough is intentional</span>
<span class="c"></span>
            <span class="nx">default</span><span class="o">:</span> <span class="c">// prevent alpha and punctuation</span>
<span class="c"></span>                <span class="nx">Event</span><span class="o">.</span><span class="nx">stopEvent</span><span class="o">(</span><span class="nx">e</span><span class="o">);</span>
                <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
        <span class="o">}</span>
    <span class="o">};</span>

    <span class="c">/** </span>
<span class="c">     * Allows numbers and special chars only.  Used for the</span>
<span class="c">     * rgb and hsv fields keypress handler.</span>
<span class="c">     * @method _numbersOnly</span>
<span class="c">     * @param e {Event} the event</span>
<span class="c">     * @private</span>
<span class="c">     * @return {boolean} false if we are canceling the event</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_numbersOnly</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">e</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">return</span> <span class="nx">_hexOnly</span><span class="o">(</span><span class="nx">e</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Returns the element reference that is saved.  The id can be either</span>
<span class="c">     * the element id, or the key for this id in the &quot;id&quot; config attribute.</span>
<span class="c">     * For instance, the host element id can be obtained by passing its</span>
<span class="c">     * id (default: &quot;yui_picker&quot;) or by its key &quot;YUI_PICKER&quot;.</span>
<span class="c">     * @param id {string} the element id, or key </span>
<span class="c">     * @return {HTMLElement} a reference to the element</span>
<span class="c">     */</span>
    <span class="nx">proto</span><span class="o">.</span><span class="nx">getElement</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">id</span><span class="o">)</span> <span class="o">{</span> 
        <span class="k">return</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">ELEMENTS</span><span class="o">)[</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">IDS</span><span class="o">)[</span><span class="nx">id</span><span class="o">]];</span> 
    <span class="o">};</span>

    <span class="k">var</span> <span class="nx">_createElements</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">logger</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Building markup&quot;</span><span class="o">);</span>
        <span class="k">var</span> <span class="nx">el</span><span class="o">,</span> <span class="nx">child</span><span class="o">,</span> <span class="nx">img</span><span class="o">,</span> <span class="nx">fld</span><span class="o">,</span> <span class="nx">i</span><span class="o">,</span> 
            <span class="nx">ids</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">IDS</span><span class="o">),</span>
            <span class="nx">txt</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">TXT</span><span class="o">),</span>
            <span class="nx">images</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">IMAGES</span><span class="o">),</span>
            <span class="nx">Elem</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">type</span><span class="o">,</span> <span class="nx">o</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">var</span> <span class="nx">n</span> <span class="o">=</span> <span class="nb">document</span><span class="o">.</span><span class="nx">createElement</span><span class="o">(</span><span class="nx">type</span><span class="o">);</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">o</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">lang</span><span class="o">.</span><span class="nx">augmentObject</span><span class="o">(</span><span class="nx">n</span><span class="o">,</span> <span class="nx">o</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>
                <span class="o">}</span>
                <span class="k">return</span> <span class="nx">n</span><span class="o">;</span>
            <span class="o">},</span>
            <span class="nx">RGBElem</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">type</span><span class="o">,</span> <span class="nx">obj</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">var</span> <span class="nx">o</span> <span class="o">=</span> <span class="nx">lang</span><span class="o">.</span><span class="nx">merge</span><span class="o">({</span>
                        <span class="c">//type: &quot;txt&quot;,</span>
<span class="c"></span>                        <span class="nx">autocomplete</span><span class="o">:</span> <span class="s2">&quot;off&quot;</span><span class="o">,</span>
                        <span class="nx">value</span><span class="o">:</span> <span class="s2">&quot;0&quot;</span><span class="o">,</span>
                        <span class="nx">size</span><span class="o">:</span> <span class="m">3</span><span class="o">,</span>
                        <span class="nx">maxlength</span><span class="o">:</span> <span class="m">3</span>
                    <span class="o">},</span> <span class="nx">obj</span><span class="o">);</span>

                <span class="nx">o</span><span class="o">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">o</span><span class="o">.</span><span class="nx">id</span><span class="o">;</span>
                <span class="k">return</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="nx">type</span><span class="o">,</span> <span class="nx">o</span><span class="o">);</span>
            <span class="o">};</span>

        <span class="k">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;element&quot;</span><span class="o">);</span>

        <span class="c">// Picker slider (S and V) ---------------------------------------------</span>
<span class="c"></span>
        <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;div&quot;</span><span class="o">,</span> <span class="o">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">PICKER_BG</span><span class="o">],</span>
            <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-bg&quot;</span><span class="o">,</span>
            <span class="nx">tabIndex</span><span class="o">:</span> <span class="o">-</span><span class="m">1</span><span class="o">,</span>
            <span class="nx">hideFocus</span><span class="o">:</span> <span class="kc">true</span>
        <span class="o">});</span>

        <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;div&quot;</span><span class="o">,</span> <span class="o">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">PICKER_THUMB</span><span class="o">],</span>
            <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-thumb&quot;</span>
        <span class="o">});</span>

        <span class="nx">img</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;img&quot;</span><span class="o">,</span> <span class="o">{</span>
            <span class="nx">src</span><span class="o">:</span> <span class="nx">images</span><span class="o">.</span><span class="nx">PICKER_THUMB</span>
        <span class="o">});</span>

        <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">img</span><span class="o">);</span>
        <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>
        <span class="nx">p</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
        
        <span class="c">// Hue slider ---------------------------------------------</span>
<span class="c"></span>        <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;div&quot;</span><span class="o">,</span> <span class="o">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HUE_BG</span><span class="o">],</span>
            <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-hue-bg&quot;</span><span class="o">,</span>
            <span class="nx">tabIndex</span><span class="o">:</span> <span class="o">-</span><span class="m">1</span><span class="o">,</span>
            <span class="nx">hideFocus</span><span class="o">:</span> <span class="kc">true</span>
        <span class="o">});</span>

        <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;div&quot;</span><span class="o">,</span> <span class="o">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HUE_THUMB</span><span class="o">],</span>
            <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-hue-thumb&quot;</span>
        <span class="o">});</span>

        <span class="nx">img</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;img&quot;</span><span class="o">,</span> <span class="o">{</span>
            <span class="nx">src</span><span class="o">:</span> <span class="nx">images</span><span class="o">.</span><span class="nx">HUE_THUMB</span>
        <span class="o">});</span>

        <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">img</span><span class="o">);</span>
        <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>
        <span class="nx">p</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>


        <span class="c">// controls ---------------------------------------------</span>
<span class="c"></span>
        <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;div&quot;</span><span class="o">,</span> <span class="o">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">CONTROLS</span><span class="o">],</span>
            <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-controls&quot;</span>
        <span class="o">});</span>

        <span class="nx">p</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
        <span class="nx">p</span> <span class="o">=</span> <span class="nx">el</span><span class="o">;</span>

            <span class="c">// controls header</span>
<span class="c"></span>            <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;div&quot;</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;hd&quot;</span>
            <span class="o">});</span>

            <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;a&quot;</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">CONTROLS_LABEL</span><span class="o">],</span>
                <span class="c">//className: &quot;yui-picker-controls-label&quot;,</span>
<span class="c"></span>                <span class="nx">href</span><span class="o">:</span> <span class="s2">&quot;#&quot;</span>
            <span class="o">});</span>
            <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>
            <span class="nx">p</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>

            <span class="c">// bd</span>
<span class="c"></span>            <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;div&quot;</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;bd&quot;</span>
            <span class="o">});</span>

            <span class="nx">p</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>
            <span class="nx">p</span> <span class="o">=</span> <span class="nx">el</span><span class="o">;</span>

                <span class="c">// rgb</span>
<span class="c"></span>                <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;ul&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">RGB_CONTROLS</span><span class="o">],</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-rgb-controls&quot;</span>
                <span class="o">});</span>

                <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;li&quot;</span><span class="o">);</span>
                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nb">document</span><span class="o">.</span><span class="nx">createTextNode</span><span class="o">(</span><span class="nx">txt</span><span class="o">.</span><span class="nx">R</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="o">));</span>

                <span class="nx">fld</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="o">(</span><span class="s2">&quot;input&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">R</span><span class="o">],</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-r&quot;</span>
                <span class="o">});</span>

                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">fld</span><span class="o">);</span>
                <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>

                <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;li&quot;</span><span class="o">);</span>
                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nb">document</span><span class="o">.</span><span class="nx">createTextNode</span><span class="o">(</span><span class="nx">txt</span><span class="o">.</span><span class="nx">G</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="o">));</span>

                <span class="nx">fld</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="o">(</span><span class="s2">&quot;input&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">G</span><span class="o">],</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-g&quot;</span>
                <span class="o">});</span>

                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">fld</span><span class="o">);</span>
                <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>

                <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;li&quot;</span><span class="o">);</span>
                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nb">document</span><span class="o">.</span><span class="nx">createTextNode</span><span class="o">(</span><span class="nx">txt</span><span class="o">.</span><span class="nx">B</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="o">));</span>

                <span class="nx">fld</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="o">(</span><span class="s2">&quot;input&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">B</span><span class="o">],</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-b&quot;</span>
                <span class="o">});</span>

                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">fld</span><span class="o">);</span>
                <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>

                <span class="nx">p</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>

                <span class="c">// hsv</span>
<span class="c"></span>                <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;ul&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HSV_CONTROLS</span><span class="o">],</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-hsv-controls&quot;</span>
                <span class="o">});</span>

                <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;li&quot;</span><span class="o">);</span>
                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nb">document</span><span class="o">.</span><span class="nx">createTextNode</span><span class="o">(</span><span class="nx">txt</span><span class="o">.</span><span class="nx">H</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="o">));</span>

                <span class="nx">fld</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="o">(</span><span class="s2">&quot;input&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">H</span><span class="o">],</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-h&quot;</span>
                <span class="o">});</span>

                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">fld</span><span class="o">);</span>
                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nb">document</span><span class="o">.</span><span class="nx">createTextNode</span><span class="o">(</span><span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="nx">txt</span><span class="o">.</span><span class="nx">DEG</span><span class="o">));</span>

                <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>

                <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;li&quot;</span><span class="o">);</span>
                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nb">document</span><span class="o">.</span><span class="nx">createTextNode</span><span class="o">(</span><span class="nx">txt</span><span class="o">.</span><span class="nx">S</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="o">));</span>

                <span class="nx">fld</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="o">(</span><span class="s2">&quot;input&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">S</span><span class="o">],</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-s&quot;</span>
                <span class="o">});</span>

                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">fld</span><span class="o">);</span>
                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nb">document</span><span class="o">.</span><span class="nx">createTextNode</span><span class="o">(</span><span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="nx">txt</span><span class="o">.</span><span class="nx">PERCENT</span><span class="o">));</span>

                <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>

                <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;li&quot;</span><span class="o">);</span>
                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nb">document</span><span class="o">.</span><span class="nx">createTextNode</span><span class="o">(</span><span class="nx">txt</span><span class="o">.</span><span class="nx">V</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="o">));</span>

                <span class="nx">fld</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="o">(</span><span class="s2">&quot;input&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">V</span><span class="o">],</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-v&quot;</span>
                <span class="o">});</span>

                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">fld</span><span class="o">);</span>
                <span class="nx">child</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nb">document</span><span class="o">.</span><span class="nx">createTextNode</span><span class="o">(</span><span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="nx">txt</span><span class="o">.</span><span class="nx">PERCENT</span><span class="o">));</span>

                <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>
                <span class="nx">p</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>


                <span class="c">// hex summary</span>
<span class="c"></span>
                <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;ul&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HEX_SUMMARY</span><span class="o">],</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-hex_summary&quot;</span>
                <span class="o">});</span>

                <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;li&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">R_HEX</span><span class="o">]</span>
                <span class="o">});</span>
                <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>

                <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;li&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">G_HEX</span><span class="o">]</span>
                <span class="o">});</span>
                <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>

                <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;li&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">B_HEX</span><span class="o">]</span>
                <span class="o">});</span>
                <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>
                <span class="nx">p</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>

                <span class="c">// hex field</span>
<span class="c"></span>                <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;div&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HEX_CONTROLS</span><span class="o">],</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-hex-controls&quot;</span>
                <span class="o">});</span>
                <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nb">document</span><span class="o">.</span><span class="nx">createTextNode</span><span class="o">(</span><span class="nx">txt</span><span class="o">.</span><span class="nx">HEX</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="o">));</span>

                <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="o">(</span><span class="s2">&quot;input&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HEX</span><span class="o">],</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-hex&quot;</span><span class="o">,</span>
                    <span class="nx">size</span><span class="o">:</span> <span class="m">6</span><span class="o">,</span>
                    <span class="nx">maxlength</span><span class="o">:</span> <span class="m">6</span>
                <span class="o">});</span>

                <span class="nx">el</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">child</span><span class="o">);</span>
                <span class="nx">p</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>

                <span class="nx">p</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s2">&quot;element&quot;</span><span class="o">);</span>

                <span class="c">// swatch</span>
<span class="c"></span>                <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;div&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">SWATCH</span><span class="o">],</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-swatch&quot;</span>
                <span class="o">});</span>

                <span class="nx">p</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>

                <span class="c">// websafe swatch</span>
<span class="c"></span>                <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="o">(</span><span class="s2">&quot;div&quot;</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">WEBSAFE_SWATCH</span><span class="o">],</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-websafe-swatch&quot;</span>
                <span class="o">});</span>

                <span class="nx">p</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>

    <span class="o">};</span>

    <span class="k">var</span> <span class="nx">_attachRGBHSV</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">id</span><span class="o">,</span> <span class="nx">config</span><span class="o">)</span> <span class="o">{</span>
        <span class="nx">Event</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="nx">id</span><span class="o">),</span> <span class="s2">&quot;keydown&quot;</span><span class="o">,</span> <span class="k">function</span><span class="o">(</span><span class="nx">e</span><span class="o">,</span> <span class="nx">me</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">_rgbFieldKeypress</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">me</span><span class="o">,</span> <span class="nx">e</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="nx">config</span><span class="o">);</span>
            <span class="o">},</span> <span class="k">this</span><span class="o">);</span>
        <span class="nx">Event</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="nx">id</span><span class="o">),</span> <span class="s2">&quot;keypress&quot;</span><span class="o">,</span> <span class="nx">_numbersOnly</span><span class="o">,</span> <span class="k">this</span><span class="o">);</span>
        <span class="nx">Event</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="nx">id</span><span class="o">),</span> <span class="s2">&quot;blur&quot;</span><span class="o">,</span> <span class="k">function</span><span class="o">(</span><span class="nx">e</span><span class="o">,</span> <span class="nx">me</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">_useFieldValue</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">me</span><span class="o">,</span> <span class="nx">e</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="nx">config</span><span class="o">);</span>
            <span class="o">},</span> <span class="k">this</span><span class="o">);</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Sets the initial state of the sliders</span>
<span class="c">     * @method initPicker</span>
<span class="c">     */</span>
    <span class="nx">proto</span><span class="o">.</span><span class="nx">initPicker</span> <span class="o">=</span> <span class="k">function</span> <span class="o">()</span> <span class="o">{</span>

        <span class="c">// bind all of our elements</span>
<span class="c"></span>        <span class="k">var</span> <span class="nx">o</span><span class="o">=</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">,</span> 
            <span class="nx">ids</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">o</span><span class="o">.</span><span class="nx">IDS</span><span class="o">),</span> 
            <span class="nx">els</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">o</span><span class="o">.</span><span class="nx">ELEMENTS</span><span class="o">),</span> 
                  <span class="nx">i</span><span class="o">,</span> <span class="nx">el</span><span class="o">,</span> <span class="nx">id</span><span class="o">;</span>

        <span class="c">// Add the default value as a key for each element for easier lookup</span>
<span class="c"></span>        <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="k">in</span> <span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">lang</span><span class="o">.</span><span class="nx">hasOwnProperty</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">,</span> <span class="nx">i</span><span class="o">))</span> <span class="o">{</span>
                <span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">[</span><span class="nx">i</span><span class="o">]]</span> <span class="o">=</span> <span class="nx">ids</span><span class="o">[</span><span class="nx">i</span><span class="o">];</span>
            <span class="o">}</span>
        <span class="o">}</span>

        <span class="c">// Check for picker element, if not there, create all of them</span>
<span class="c"></span>        <span class="nx">el</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">ids</span><span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">PICKER_BG</span><span class="o">]);</span>
        <span class="k">if</span> <span class="o">(!</span><span class="nx">el</span><span class="o">)</span> <span class="o">{</span>
            <span class="nx">_createElements</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
        <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
            <span class="k">this</span><span class="o">.</span><span class="nx">logger</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;Using pre-existing markup&quot;</span><span class="o">);</span>
        <span class="o">}</span>

        <span class="k">for</span> <span class="o">(</span><span class="nx">i</span> <span class="k">in</span> <span class="nx">ids</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">if</span> <span class="o">(</span><span class="nx">lang</span><span class="o">.</span><span class="nx">hasOwnProperty</span><span class="o">(</span><span class="nx">ids</span><span class="o">,</span> <span class="nx">i</span><span class="o">))</span> <span class="o">{</span>
                <span class="c">// look for element</span>
<span class="c"></span>                <span class="nx">el</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">ids</span><span class="o">[</span><span class="nx">i</span><span class="o">]);</span>

                <span class="c">// generate an id if the implementer passed in an element reference,</span>
<span class="c"></span>                <span class="c">// and the element did not have an id already</span>
<span class="c"></span>                <span class="nx">id</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">generateId</span><span class="o">(</span><span class="nx">el</span><span class="o">);</span>

                <span class="c">// update the id in case we generated the id</span>
<span class="c"></span>                <span class="nx">ids</span><span class="o">[</span><span class="nx">i</span><span class="o">]</span> <span class="o">=</span> <span class="nx">id</span><span class="o">;</span> <span class="c">// key is WEBSAFE_SWATCH</span>
<span class="c"></span>                <span class="nx">ids</span><span class="o">[</span><span class="nx">ids</span><span class="o">[</span><span class="nx">i</span><span class="o">]]</span> <span class="o">=</span> <span class="nx">id</span><span class="o">;</span> <span class="c">// key is websafe_swatch</span>
<span class="c"></span>
                <span class="c">// store the dom ref</span>
<span class="c"></span>                <span class="nx">els</span><span class="o">[</span><span class="nx">id</span><span class="o">]</span> <span class="o">=</span> <span class="nx">el</span><span class="o">;</span>
            <span class="o">}</span>
        <span class="o">}</span>

        <span class="c">// set the initial visibility state of our controls</span>
<span class="c"></span>            <span class="nx">els</span> <span class="o">=</span> <span class="o">[</span><span class="nx">o</span><span class="o">.</span><span class="nx">SHOW_CONTROLS</span><span class="o">,</span> 
                   <span class="nx">o</span><span class="o">.</span><span class="nx">SHOW_RGB_CONTROLS</span><span class="o">,</span>
                   <span class="nx">o</span><span class="o">.</span><span class="nx">SHOW_HSV_CONTROLS</span><span class="o">,</span>
                   <span class="nx">o</span><span class="o">.</span><span class="nx">SHOW_HEX_CONTROLS</span><span class="o">,</span>
                   <span class="nx">o</span><span class="o">.</span><span class="nx">SHOW_HEX_SUMMARY</span><span class="o">,</span>
                   <span class="nx">o</span><span class="o">.</span><span class="nx">SHOW_WEBSAFE</span>
                   <span class="o">];</span>

        <span class="k">for</span> <span class="o">(</span><span class="nx">i</span><span class="o">=</span><span class="m">0</span><span class="o">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">els</span><span class="o">.</span><span class="nx">length</span><span class="o">;</span> <span class="nx">i</span><span class="o">=</span><span class="nx">i</span><span class="o">+</span><span class="m">1</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="nx">els</span><span class="o">[</span><span class="nx">i</span><span class="o">],</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">els</span><span class="o">[</span><span class="nx">i</span><span class="o">]));</span>
        <span class="o">}</span>

        <span class="k">var</span> <span class="nx">s</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">o</span><span class="o">.</span><span class="nx">PICKER_SIZE</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">logger</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;picker size&quot;</span> <span class="o">+</span> <span class="nx">s</span><span class="o">);</span>

        <span class="k">this</span><span class="o">.</span><span class="nx">hueSlider</span> <span class="o">=</span> <span class="nx">Slider</span><span class="o">.</span><span class="nx">getVertSlider</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HUE_BG</span><span class="o">),</span> 
                                              <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HUE_THUMB</span><span class="o">),</span> <span class="m">0</span><span class="o">,</span> <span class="nx">s</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">hueSlider</span><span class="o">.</span><span class="nx">subscribe</span><span class="o">(</span><span class="s2">&quot;change&quot;</span><span class="o">,</span> <span class="nx">_onHueSliderChange</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>

        <span class="k">this</span><span class="o">.</span><span class="nx">pickerSlider</span> <span class="o">=</span> <span class="nx">Slider</span><span class="o">.</span><span class="nx">getSliderRegion</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">PICKER_BG</span><span class="o">),</span> 
                                                   <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">PICKER_THUMB</span><span class="o">),</span> <span class="m">0</span><span class="o">,</span> <span class="nx">s</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="nx">s</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">pickerSlider</span><span class="o">.</span><span class="nx">subscribe</span><span class="o">(</span><span class="s2">&quot;change&quot;</span><span class="o">,</span> <span class="nx">_onPickerSliderChange</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>

        <span class="c">//_onHueSliderChange.call(this, 0);</span>
<span class="c"></span>
        <span class="nx">Event</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">WEBSAFE_SWATCH</span><span class="o">),</span> <span class="s2">&quot;click&quot;</span><span class="o">,</span> <span class="k">function</span><span class="o">(</span><span class="nx">e</span><span class="o">)</span> <span class="o">{</span>
               <span class="k">this</span><span class="o">.</span><span class="nx">setValue</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">o</span><span class="o">.</span><span class="nx">WEBSAFE</span><span class="o">));</span>
               <span class="c">//_updateSliders</span>
<span class="c"></span>           <span class="o">},</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>

        <span class="nx">Event</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">CONTROLS_LABEL</span><span class="o">),</span> <span class="s2">&quot;click&quot;</span><span class="o">,</span> <span class="k">function</span><span class="o">(</span><span class="nx">e</span><span class="o">)</span> <span class="o">{</span>
               <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="nx">o</span><span class="o">.</span><span class="nx">SHOW_CONTROLS</span><span class="o">,</span> <span class="o">!</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">o</span><span class="o">.</span><span class="nx">SHOW_CONTROLS</span><span class="o">));</span>
               <span class="nx">Event</span><span class="o">.</span><span class="nx">preventDefault</span><span class="o">(</span><span class="nx">e</span><span class="o">);</span>
           <span class="o">},</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>

        <span class="nx">_attachRGBHSV</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">R</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">RED</span><span class="o">);</span> 
        <span class="nx">_attachRGBHSV</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">G</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">GREEN</span><span class="o">);</span> 
        <span class="nx">_attachRGBHSV</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">B</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">BLUE</span><span class="o">);</span> 
        <span class="nx">_attachRGBHSV</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">H</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HUE</span><span class="o">);</span> 
        <span class="nx">_attachRGBHSV</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">S</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SATURATION</span><span class="o">);</span> 
        <span class="nx">_attachRGBHSV</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">V</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">VALUE</span><span class="o">);</span> 

        <span class="nx">Event</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HEX</span><span class="o">),</span> <span class="s2">&quot;keydown&quot;</span><span class="o">,</span> <span class="k">function</span><span class="o">(</span><span class="nx">e</span><span class="o">,</span> <span class="nx">me</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">_hexFieldKeypress</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">me</span><span class="o">,</span> <span class="nx">e</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="nx">me</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HEX</span><span class="o">);</span>
            <span class="o">},</span> <span class="k">this</span><span class="o">);</span>

        <span class="nx">Event</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HEX</span><span class="o">),</span> <span class="s2">&quot;keypress&quot;</span><span class="o">,</span> <span class="nx">_hexOnly</span><span class="o">,</span> <span class="k">this</span><span class="o">);</span>
        <span class="nx">Event</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HEX</span><span class="o">),</span> <span class="s2">&quot;blur&quot;</span><span class="o">,</span> <span class="k">function</span><span class="o">(</span><span class="nx">e</span><span class="o">,</span> <span class="nx">me</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">_useFieldValue</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="nx">me</span><span class="o">,</span> <span class="nx">e</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="nx">me</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HEX</span><span class="o">);</span>
            <span class="o">},</span> <span class="k">this</span><span class="o">);</span>
    <span class="o">};</span>



    <span class="c">/**</span>
<span class="c">     * Updates the rgb attribute with the current state of the r,g,b</span>
<span class="c">     * fields.  This is invoked from change listeners on these</span>
<span class="c">     * attributes to facilitate updating these values from the</span>
<span class="c">     * individual form fields</span>
<span class="c">     * @method _updateRGB</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_updateRGB</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">RED</span><span class="o">),</span> 
                   <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">GREEN</span><span class="o">),</span>
                   <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">BLUE</span><span class="o">)];</span>

        <span class="k">this</span><span class="o">.</span><span class="nx">logger</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;RGB value set to &quot;</span> <span class="o">+</span> <span class="nx">rgb</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">RGB</span><span class="o">,</span> <span class="nx">rgb</span><span class="o">);</span>

        <span class="nx">_updateSliders</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Updates the RGB values from the current state of the HSV</span>
<span class="c">     * values.  Executed when the one of the HSV form fields are</span>
<span class="c">     * updated</span>
<span class="c">     * _updateRGBFromHSV</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_updateRGBFromHSV</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">var</span> <span class="nx">hsv</span> <span class="o">=</span> <span class="o">[</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HUE</span><span class="o">),</span> 
                   <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SATURATION</span><span class="o">)/</span><span class="m">100</span><span class="o">,</span>
                   <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">VALUE</span><span class="o">)/</span><span class="m">100</span><span class="o">];</span>

        <span class="k">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="nx">Color</span><span class="o">.</span><span class="nx">hsv2rgb</span><span class="o">(</span><span class="nx">hsv</span><span class="o">);</span>

        <span class="k">this</span><span class="o">.</span><span class="nx">logger</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s2">&quot;HSV converted to RGB &quot;</span> <span class="o">+</span> <span class="nx">hsv</span> <span class="o">+</span> <span class="s2">&quot; : &quot;</span> <span class="o">+</span> <span class="nx">rgb</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">RGB</span><span class="o">,</span> <span class="nx">rgb</span><span class="o">);</span>

        <span class="nx">_updateSliders</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
    <span class="o">};</span>

    <span class="c">/**</span>
<span class="c">     * Parses the hex string to normalize shorthand values, converts</span>
<span class="c">     * the hex value to rgb and updates the rgb attribute (which</span>
<span class="c">     * updates the state for all of the other values)</span>
<span class="c">     * method _updateHex</span>
<span class="c">     * @private</span>
<span class="c">     */</span>
    <span class="k">var</span> <span class="nx">_updateHex</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
       
        <span class="k">var</span> <span class="nx">hex</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HEX</span><span class="o">),</span> <span class="nx">l</span><span class="o">=</span><span class="nx">hex</span><span class="o">.</span><span class="nx">length</span><span class="o">;</span>

        <span class="c">// support #369 -&gt; #336699 shorthand</span>
<span class="c"></span>        <span class="k">if</span> <span class="o">(</span><span class="nx">l</span> <span class="o">===</span> <span class="m">3</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="nx">hex</span><span class="o">.</span><span class="nx">split</span><span class="o">(</span><span class="s2">&quot;&quot;</span><span class="o">),</span> <span class="nx">i</span><span class="o">;</span>
            <span class="k">for</span> <span class="o">(</span><span class="nx">i</span><span class="o">=</span><span class="m">0</span><span class="o">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">l</span><span class="o">;</span> <span class="nx">i</span><span class="o">=</span><span class="nx">i</span><span class="o">+</span><span class="m">1</span><span class="o">)</span> <span class="o">{</span>
                <span class="nx">c</span><span class="o">[</span><span class="nx">i</span><span class="o">]</span> <span class="o">=</span> <span class="nx">c</span><span class="o">[</span><span class="nx">i</span><span class="o">]</span> <span class="o">+</span> <span class="nx">c</span><span class="o">[</span><span class="nx">i</span><span class="o">];</span>
            <span class="o">}</span>

            <span class="nx">hex</span> <span class="o">=</span> <span class="nx">c</span><span class="o">.</span><span class="nx">join</span><span class="o">(</span><span class="s2">&quot;&quot;</span><span class="o">);</span>
        <span class="o">}</span>

        <span class="k">if</span> <span class="o">(</span><span class="nx">hex</span><span class="o">.</span><span class="nx">length</span> <span class="o">!==</span> <span class="m">6</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">this</span><span class="o">.</span><span class="nx">logger</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">TXT</span><span class="o">.</span><span class="nx">ILLEGAL_HEX</span><span class="o">),</span> <span class="s2">&quot;error&quot;</span><span class="o">);</span>
            <span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
        <span class="o">}</span>

        <span class="k">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="nx">Color</span><span class="o">.</span><span class="nx">hex2rgb</span><span class="o">(</span><span class="nx">hex</span><span class="o">);</span>

        <span class="k">this</span><span class="o">.</span><span class="nx">logger</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="nx">sub</span><span class="o">(</span><span class="s2">&quot;Hex value set to {hex} ({rgb})&quot;</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">hex</span><span class="o">:</span> <span class="nx">hex</span><span class="o">,</span> <span class="nx">rgb</span><span class="o">:</span> <span class="nx">rgb</span>
            <span class="o">}));</span>

        <span class="k">this</span><span class="o">.</span><span class="nx">setValue</span><span class="o">(</span><span class="nx">rgb</span><span class="o">);</span>

        <span class="c">//_updateSliders.call(this);</span>
<span class="c"></span>
    <span class="o">};</span>



    <span class="c">/**</span>
<span class="c">     * Sets up the config attributes and the change listeners for this</span>
<span class="c">     * properties</span>
<span class="c">     * @method initAttributes</span>
<span class="c">     * @param attr An object containing default attribute values</span>
<span class="c">     */</span>
    <span class="nx">proto</span><span class="o">.</span><span class="nx">initAttributes</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">attr</span><span class="o">)</span> <span class="o">{</span>

        <span class="nx">attr</span> <span class="o">=</span> <span class="nx">attr</span> <span class="o">||</span> <span class="o">{};</span>
        <span class="nx">YAHOO</span><span class="o">.</span><span class="nx">widget</span><span class="o">.</span><span class="nx">ColorPicker</span><span class="o">.</span><span class="nx">superclass</span><span class="o">.</span><span class="nx">initAttributes</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="nx">attr</span><span class="o">);</span>
        
        <span class="c">/**</span>
<span class="c">         * The size of the picker. Trying to change this is not recommended.</span>
<span class="c">         * @attribute pickersize</span>
<span class="c">         * @default 180</span>
<span class="c">         * @type int</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">PICKER_SIZE</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">size</span> <span class="o">||</span> <span class="k">this</span><span class="o">.</span><span class="nx">DEFAULT</span><span class="o">.</span><span class="nx">PICKER_SIZE</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * The current hue value 0-360</span>
<span class="c">         * @attribute hue</span>
<span class="c">         * @type int</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HUE</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">hue</span> <span class="o">||</span> <span class="m">0</span><span class="o">,</span>
                <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="o">.</span><span class="nx">isNumber</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * The current saturation value 0-100</span>
<span class="c">         * @attribute saturation</span>
<span class="c">         * @type int</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SATURATION</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">saturation</span> <span class="o">||</span> <span class="m">0</span><span class="o">,</span>
                <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="o">.</span><span class="nx">isNumber</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * The current value/brightness value 0-100</span>
<span class="c">         * @attribute value</span>
<span class="c">         * @type int</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">VALUE</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">value</span> <span class="o">||</span> <span class="m">100</span><span class="o">,</span>
                <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="o">.</span><span class="nx">isNumber</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * The current red value 0-255</span>
<span class="c">         * @attribute red</span>
<span class="c">         * @type int</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">RED</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">red</span> <span class="o">||</span> <span class="m">255</span><span class="o">,</span>
                <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="o">.</span><span class="nx">isNumber</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * The current green value 0-255</span>
<span class="c">         * @attribute green </span>
<span class="c">         * @type int</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">GREEN</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">red</span> <span class="o">||</span> <span class="m">255</span><span class="o">,</span>
                <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="o">.</span><span class="nx">isNumber</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * The current blue value 0-255</span>
<span class="c">         * @attribute blue</span>
<span class="c">         * @type int</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">BLUE</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">blue</span> <span class="o">||</span> <span class="m">255</span><span class="o">,</span>
                <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="o">.</span><span class="nx">isNumber</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * The current hex value #000000-#FFFFFF, without the #</span>
<span class="c">         * @attribute hex</span>
<span class="c">         * @type string</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HEX</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">hex</span> <span class="o">||</span> <span class="s2">&quot;FFFFFF&quot;</span><span class="o">,</span>
                <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="o">.</span><span class="nx">isString</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * The current rgb value.  Updates the state of all of the</span>
<span class="c">         * other value fields.  Read-only: use setValue to set the</span>
<span class="c">         * controls rgb value.</span>
<span class="c">         * @attribute hex</span>
<span class="c">         * @type [int, int, int]</span>
<span class="c">         * @readonly</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">RGB</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">rgb</span> <span class="o">||</span> <span class="o">[</span><span class="m">255</span><span class="o">,</span><span class="m">255</span><span class="o">,</span><span class="m">255</span><span class="o">],</span>
                <span class="nx">method</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">rgb</span><span class="o">)</span> <span class="o">{</span>

                    <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">RED</span><span class="o">,</span> <span class="nx">rgb</span><span class="o">[</span><span class="m">0</span><span class="o">],</span> <span class="kc">true</span><span class="o">);</span>
                    <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">GREEN</span><span class="o">,</span> <span class="nx">rgb</span><span class="o">[</span><span class="m">1</span><span class="o">],</span> <span class="kc">true</span><span class="o">);</span>
                    <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">BLUE</span><span class="o">,</span> <span class="nx">rgb</span><span class="o">[</span><span class="m">2</span><span class="o">],</span> <span class="kc">true</span><span class="o">);</span>

                    <span class="k">var</span> <span class="nx">websafe</span> <span class="o">=</span> <span class="nx">Color</span><span class="o">.</span><span class="nx">websafe</span><span class="o">(</span><span class="nx">rgb</span><span class="o">);</span>
                    <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">WEBSAFE</span><span class="o">,</span> <span class="nx">websafe</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>

                    <span class="k">var</span> <span class="nx">hex</span> <span class="o">=</span> <span class="nx">Color</span><span class="o">.</span><span class="nx">rgb2hex</span><span class="o">(</span><span class="nx">rgb</span><span class="o">);</span>
                    <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HEX</span><span class="o">,</span> <span class="nx">hex</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>

                    <span class="k">var</span> <span class="nx">hsv</span> <span class="o">=</span> <span class="nx">Color</span><span class="o">.</span><span class="nx">rgb2hsv</span><span class="o">(</span><span class="nx">rgb</span><span class="o">);</span>

                    <span class="k">this</span><span class="o">.</span><span class="nx">logger</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="nx">sub</span><span class="o">(</span><span class="s2">&quot;RGB value set to {rgb} (hsv: {hsv})&quot;</span><span class="o">,</span> <span class="o">{</span>
                            <span class="s2">&quot;hsv&quot;</span><span class="o">:</span> <span class="nx">hsv</span><span class="o">,</span> <span class="s2">&quot;rgb&quot;</span><span class="o">:</span> <span class="nx">rgb</span>
                        <span class="o">}));</span>

                    <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HUE</span><span class="o">,</span> <span class="nx">hsv</span><span class="o">[</span><span class="m">0</span><span class="o">],</span> <span class="kc">true</span><span class="o">);</span>
                    <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SATURATION</span><span class="o">,</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">round</span><span class="o">(</span><span class="nx">hsv</span><span class="o">[</span><span class="m">1</span><span class="o">]*</span><span class="m">100</span><span class="o">),</span> <span class="kc">true</span><span class="o">);</span>
                    <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">VALUE</span><span class="o">,</span> <span class="nb">Math</span><span class="o">.</span><span class="nx">round</span><span class="o">(</span><span class="nx">hsv</span><span class="o">[</span><span class="m">2</span><span class="o">]*</span><span class="m">100</span><span class="o">),</span> <span class="kc">true</span><span class="o">);</span>
                <span class="o">},</span>
                <span class="nx">readonly</span><span class="o">:</span> <span class="kc">true</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * If the color picker will live inside of a container object,</span>
<span class="c">         * set, provide a reference to it so the control can use the</span>
<span class="c">         * container&#39;s events.</span>
<span class="c">         * @attribute container</span>
<span class="c">         * @type YAHOO.widget.Panel</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">CONTAINER</span><span class="o">,</span> <span class="o">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span>
                    <span class="nx">method</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">container</span><span class="o">)</span> <span class="o">{</span>
                        <span class="k">if</span> <span class="o">(</span><span class="nx">container</span><span class="o">)</span> <span class="o">{</span>
                            <span class="c">// Position can get out of sync when the</span>
<span class="c"></span>                            <span class="c">// control is manipulated while display is</span>
<span class="c"></span>                            <span class="c">// none.  Resetting the slider constraints</span>
<span class="c"></span>                            <span class="c">// when it is visible gets the state back in</span>
<span class="c"></span>                            <span class="c">// order.</span>
<span class="c"></span>                            <span class="nx">container</span><span class="o">.</span><span class="nx">showEvent</span><span class="o">.</span><span class="nx">subscribe</span><span class="o">(</span><span class="k">function</span><span class="o">()</span> <span class="o">{</span>
                                <span class="c">// this.pickerSlider.thumb.resetConstraints();</span>
<span class="c"></span>                                <span class="c">// this.hueSlider.thumb.resetConstraints();</span>
<span class="c"></span>                                <span class="k">this</span><span class="o">.</span><span class="nx">pickerSlider</span><span class="o">.</span><span class="nx">focus</span><span class="o">();</span>
                            <span class="o">},</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>
                        <span class="o">}</span>
                    <span class="o">}</span>
                <span class="o">});</span>
        <span class="c">/**</span>
<span class="c">         * The closest current websafe value</span>
<span class="c">         * @attribute websafe</span>
<span class="c">         * @type int</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">WEBSAFE</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">websafe</span> <span class="o">||</span> <span class="o">[</span><span class="m">255</span><span class="o">,</span><span class="m">255</span><span class="o">,</span><span class="m">255</span><span class="o">]</span>
            <span class="o">});</span>


        <span class="k">var</span> <span class="nx">ids</span> <span class="o">=</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">ids</span> <span class="o">||</span> <span class="nx">lang</span><span class="o">.</span><span class="nx">merge</span><span class="o">({},</span> <span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">);</span>

        <span class="k">if</span> <span class="o">(!</span><span class="nx">attr</span><span class="o">.</span><span class="nx">ids</span> <span class="o">&amp;&amp;</span> <span class="nx">_pickercount</span> <span class="o">&gt;</span> <span class="m">1</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">for</span> <span class="o">(</span><span class="k">var</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">ids</span><span class="o">)</span> <span class="o">{</span>
                <span class="k">if</span> <span class="o">(</span><span class="nx">lang</span><span class="o">.</span><span class="nx">hasOwnProperty</span><span class="o">(</span><span class="nx">ids</span><span class="o">,</span> <span class="nx">i</span><span class="o">))</span> <span class="o">{</span>
                    <span class="nx">ids</span><span class="o">[</span><span class="nx">i</span><span class="o">]</span> <span class="o">=</span> <span class="nx">ids</span><span class="o">[</span><span class="nx">i</span><span class="o">]</span> <span class="o">+</span> <span class="nx">_pickercount</span><span class="o">;</span>
                <span class="o">}</span>
            <span class="o">}</span>
        <span class="o">}</span>


        <span class="c">/**</span>
<span class="c">         * A list of element ids and/or element references used by the </span>
<span class="c">         * control.  The default is the this.ID list, and can be customized</span>
<span class="c">         * by passing a list in the contructor</span>
<span class="c">         * @attribute ids</span>
<span class="c">         * @type {referenceid: realid}</span>
<span class="c">         * @writeonce</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">IDS</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="nx">ids</span><span class="o">,</span>
                <span class="nx">writeonce</span><span class="o">:</span> <span class="kc">true</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * A list of txt strings for internationalization.  Default</span>
<span class="c">         * is this.TXT</span>
<span class="c">         * @attribute txt</span>
<span class="c">         * @type {key: txt}</span>
<span class="c">         * @writeonce</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">TXT</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">txt</span> <span class="o">||</span> <span class="k">this</span><span class="o">.</span><span class="nx">TXT</span><span class="o">,</span>
                <span class="nx">writeonce</span><span class="o">:</span> <span class="kc">true</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * The img src default list</span>
<span class="c">         * is this.IMAGES</span>
<span class="c">         * @attribute images</span>
<span class="c">         * @type {key: image}</span>
<span class="c">         * @writeonce</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">IMAGES</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="o">.</span><span class="nx">images</span> <span class="o">||</span> <span class="k">this</span><span class="o">.</span><span class="nx">IMAGE</span><span class="o">,</span>
                <span class="nx">writeonce</span><span class="o">:</span> <span class="kc">true</span>
            <span class="o">});</span>
        <span class="c">/**</span>
<span class="c">         * The element refs used by this control.  Set at initialization</span>
<span class="c">         * @attribute elements</span>
<span class="c">         * @type {id: HTMLElement}</span>
<span class="c">         * @readonly</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">ELEMENTS</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="o">{},</span>
                <span class="nx">readonly</span><span class="o">:</span> <span class="kc">true</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * Returns the cached element reference.  If the id is not a string, it</span>
<span class="c">         * is assumed that it is an element and this is returned.</span>
<span class="c">         * @param id {string|HTMLElement} the element key, id, or ref</span>
<span class="c">         * @param on {boolean} hide or show.  If true, show</span>
<span class="c">         * @private */</span>
        <span class="k">var</span> <span class="nx">_hideShowEl</span> <span class="o">=</span> <span class="k">function</span><span class="o">(</span><span class="nx">id</span><span class="o">,</span> <span class="nx">on</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="o">(</span><span class="nx">lang</span><span class="o">.</span><span class="nx">isString</span><span class="o">(</span><span class="nx">id</span><span class="o">)</span> <span class="o">?</span> <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="nx">id</span><span class="o">)</span> <span class="o">:</span> <span class="nx">id</span><span class="o">);</span>
            <span class="c">//Dom.setStyle(id, &quot;visibility&quot;, (on) ? &quot;&quot; : &quot;hidden&quot;);</span>
<span class="c"></span>            <span class="nx">Dom</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="nx">el</span><span class="o">,</span> <span class="s2">&quot;display&quot;</span><span class="o">,</span> <span class="o">(</span><span class="nx">on</span><span class="o">)</span> <span class="o">?</span> <span class="s2">&quot;&quot;</span> <span class="o">:</span> <span class="s2">&quot;none&quot;</span><span class="o">);</span>
        <span class="o">};</span>

        <span class="c">/**</span>
<span class="c">         * Hide/show the entire set of controls</span>
<span class="c">         * @attribute showcontrols</span>
<span class="c">         * @type boolean</span>
<span class="c">         * @default true</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SHOW_CONTROLS</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="o">(</span><span class="nx">attr</span><span class="o">.</span><span class="nx">showcontrols</span><span class="o">)</span> <span class="o">||</span> <span class="kc">true</span><span class="o">,</span>
                <span class="nx">method</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">on</span><span class="o">)</span> <span class="o">{</span>

                    <span class="k">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="nx">Dom</span><span class="o">.</span><span class="nx">getElementsByClassName</span><span class="o">(</span><span class="s2">&quot;bd&quot;</span><span class="o">,</span> <span class="s2">&quot;div&quot;</span><span class="o">,</span> 
                            <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">CONTROLS</span><span class="o">))[</span><span class="m">0</span><span class="o">];</span>

                    <span class="nx">_hideShowEl</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="nx">el</span><span class="o">,</span> <span class="nx">on</span><span class="o">);</span>

                    <span class="k">this</span><span class="o">.</span><span class="nx">getElement</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">CONTROLS_LABEL</span><span class="o">).</span><span class="nx">innerHTML</span> <span class="o">=</span> 
                        <span class="o">(</span><span class="nx">on</span><span class="o">)</span> <span class="o">?</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">TXT</span><span class="o">).</span><span class="nx">HIDE_CONTROLS</span> <span class="o">:</span>
                               <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">TXT</span><span class="o">).</span><span class="nx">SHOW_CONTROLS</span><span class="o">;</span>

                <span class="o">}</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * Hide/show the rgb controls</span>
<span class="c">         * @attribute showrgbcontrols</span>
<span class="c">         * @type boolean</span>
<span class="c">         * @default true</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SHOW_RGB_CONTROLS</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="o">(</span><span class="nx">attr</span><span class="o">.</span><span class="nx">showrgbcontrols</span><span class="o">)</span> <span class="o">||</span> <span class="kc">true</span><span class="o">,</span>
                <span class="nx">method</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">on</span><span class="o">)</span> <span class="o">{</span>
                    <span class="c">//Dom.setStyle(this.getElement(this.ID.RBG_CONTROLS), &quot;visibility&quot;, (on) ? &quot;&quot; : &quot;hidden&quot;);</span>
<span class="c"></span>                    <span class="nx">_hideShowEl</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">RGB_CONTROLS</span><span class="o">,</span> <span class="nx">on</span><span class="o">);</span>
                <span class="o">}</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * Hide/show the hsv controls</span>
<span class="c">         * @attribute showhsvcontrols</span>
<span class="c">         * @type boolean</span>
<span class="c">         * @default false</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SHOW_HSV_CONTROLS</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="o">(</span><span class="nx">attr</span><span class="o">.</span><span class="nx">showhsvcontrols</span><span class="o">)</span> <span class="o">||</span> <span class="kc">false</span><span class="o">,</span>
                <span class="nx">method</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">on</span><span class="o">)</span> <span class="o">{</span>
                    <span class="c">//Dom.setStyle(this.getElement(this.ID.HSV_CONTROLS), &quot;visibility&quot;, (on) ? &quot;&quot; : &quot;hidden&quot;);</span>
<span class="c"></span>                    <span class="nx">_hideShowEl</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HSV_CONTROLS</span><span class="o">,</span> <span class="nx">on</span><span class="o">);</span>

                    <span class="c">// can&#39;t show both the hsv controls and the rbg hex summary</span>
<span class="c"></span>                    <span class="k">if</span> <span class="o">(</span><span class="nx">on</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SHOW_HEX_SUMMARY</span><span class="o">))</span> <span class="o">{</span>
                        <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SHOW_HEX_SUMMARY</span><span class="o">,</span> <span class="kc">false</span><span class="o">);</span>
                    <span class="o">}</span>
                <span class="o">}</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * Hide/show the hex controls</span>
<span class="c">         * @attribute showhexcontrols</span>
<span class="c">         * @type boolean</span>
<span class="c">         * @default true</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SHOW_HEX_CONTROLS</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="o">(</span><span class="nx">attr</span><span class="o">.</span><span class="nx">showhexcontrols</span><span class="o">)</span> <span class="o">||</span> <span class="kc">false</span><span class="o">,</span>
                <span class="nx">method</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">on</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">_hideShowEl</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HEX_CONTROLS</span><span class="o">,</span> <span class="nx">on</span><span class="o">);</span>
                <span class="o">}</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * Hide/show the websafe swatch</span>
<span class="c">         * @attribute showwebsafe</span>
<span class="c">         * @type boolean</span>
<span class="c">         * @default true</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SHOW_WEBSAFE</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="o">(</span><span class="nx">attr</span><span class="o">.</span><span class="nx">showwebsafe</span><span class="o">)</span> <span class="o">||</span> <span class="kc">true</span><span class="o">,</span>
                <span class="nx">method</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">on</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">_hideShowEl</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">WEBSAFE_SWATCH</span><span class="o">,</span> <span class="nx">on</span><span class="o">);</span>
                <span class="o">}</span>
            <span class="o">});</span>

        <span class="c">/**</span>
<span class="c">         * Hide/show the hex summary</span>
<span class="c">         * @attribute showhexsummary</span>
<span class="c">         * @type boolean</span>
<span class="c">         * @default true</span>
<span class="c">         */</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SHOW_HEX_SUMMARY</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="o">(</span><span class="nx">attr</span><span class="o">.</span><span class="nx">showhexsummary</span><span class="o">)</span> <span class="o">||</span> <span class="kc">true</span><span class="o">,</span>
                <span class="nx">method</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">on</span><span class="o">)</span> <span class="o">{</span>
                    <span class="nx">_hideShowEl</span><span class="o">.</span><span class="nx">call</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">ID</span><span class="o">.</span><span class="nx">HEX_SUMMARY</span><span class="o">,</span> <span class="nx">on</span><span class="o">);</span>

                    <span class="c">// can&#39;t show both the hsv controls and the rbg hex summary</span>
<span class="c"></span>                    <span class="k">if</span> <span class="o">(</span><span class="nx">on</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SHOW_HSV_CONTROLS</span><span class="o">))</span> <span class="o">{</span>
                        <span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SHOW_HSV_CONTROLS</span><span class="o">,</span> <span class="kc">false</span><span class="o">);</span>
                    <span class="o">}</span>
                <span class="o">}</span>
            <span class="o">});</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">setAttributeConfig</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">ANIMATE</span><span class="o">,</span> <span class="o">{</span>
                <span class="nx">value</span><span class="o">:</span> <span class="o">(</span><span class="nx">attr</span><span class="o">.</span><span class="nx">animate</span><span class="o">)</span> <span class="o">||</span> <span class="kc">true</span><span class="o">,</span>
                <span class="nx">method</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">on</span><span class="o">)</span> <span class="o">{</span>
                    <span class="k">this</span><span class="o">.</span><span class="nx">pickerSlider</span><span class="o">.</span><span class="nx">animate</span> <span class="o">=</span> <span class="nx">on</span><span class="o">;</span>
                    <span class="k">this</span><span class="o">.</span><span class="nx">hueSlider</span><span class="o">.</span><span class="nx">animate</span> <span class="o">=</span> <span class="nx">on</span><span class="o">;</span>
                <span class="o">}</span>
            <span class="o">});</span>

        <span class="k">this</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HUE</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="o">,</span> <span class="nx">_updateRGBFromHSV</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">SATURATION</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="o">,</span> <span class="nx">_updateRGBFromHSV</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">VALUE</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="o">,</span> <span class="nx">_updatePickerSlider</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>

        <span class="k">this</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">RED</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="o">,</span> <span class="nx">_updateRGB</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">GREEN</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="o">,</span> <span class="nx">_updateRGB</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>
        <span class="k">this</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">BLUE</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="o">,</span> <span class="nx">_updateRGB</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>

        <span class="k">this</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">OPT</span><span class="o">.</span><span class="nx">HEX</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="o">,</span> <span class="nx">_updateHex</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>

        <span class="k">this</span><span class="o">.</span><span class="nx">initPicker</span><span class="o">();</span>
    <span class="o">};</span>




<span class="o">})();</span>
</pre></div>
                    </div>
			</div>
		</div>
		<div class="yui-b">
            <div class="nav">

                    <div class="module">
                        <h4>Modules</h4>
                        <ul class="content">

                                <li class=""><a href="module_animation.html">animation</a></li>

                                <li class=""><a href="module_autocomplete.html">autocomplete</a></li>

                                <li class=""><a href="module_button.html">button</a></li>

                                <li class=""><a href="module_calendar.html">calendar</a></li>

                                <li class="selected"><a href="module_colorpicker.html">colorpicker</a></li>

                                <li class=""><a href="module_connection.html">connection</a></li>

                                <li class=""><a href="module_container.html">container</a></li>

                                <li class=""><a href="module_datasource.html">datasource</a></li>

                                <li class=""><a href="module_datatable.html">datatable</a></li>

                                <li class=""><a href="module_dom.html">dom</a></li>

                                <li class=""><a href="module_dragdrop.html">dragdrop</a></li>

                                <li class=""><a href="module_editor.html">editor</a></li>

                                <li class=""><a href="module_element.html">element</a></li>

                                <li class=""><a href="module_event.html">event</a></li>

                                <li class=""><a href="module_history.html">history</a></li>

                                <li class=""><a href="module_imageloader.html">imageloader</a></li>

                                <li class=""><a href="module_logger.html">logger</a></li>

                                <li class=""><a href="module_menu.html">menu</a></li>

                                <li class=""><a href="module_slider.html">slider</a></li>

                                <li class=""><a href="module_tabview.html">tabview</a></li>

                                <li class=""><a href="module_treeview.html">treeview</a></li>

                                <li class=""><a href="module_yahoo.html">yahoo</a></li>

                                <li class=""><a href="module_yuiloader.html">yuiloader</a></li>

                                <li class=""><a href="module_yuitest.html">yuitest</a></li>
                        </ul>
                    </div>

                    <div class="module">
                        <h4>Classes</h4>
                        <ul class="content">
                                <li class=""><a href="YAHOO.util.Color.html">YAHOO.util.Color</a></li>
                                <li class=""><a href="YAHOO.widget.ColorPicker.html">YAHOO.widget.ColorPicker</a></li>
                        </ul>
                    </div>

                    <div class="module">
                        <h4>Files</h4>
                        <ul class="content">        
                                <li class=""><a href="Color.js.html">Color.js</a></li>
                                <li class="selected"><a href="ColorPicker.js.html">ColorPicker.js</a></li>
                        </ul>
                    </div>





            </div>
		</div>
	</div>
	<div id="ft">
        <hr />
        Copyright &copy; 2007 Yahoo! Inc. All rights reserved.
	</div>
</div>
</body>
</html>
